<template>
  <div class="d-paner d-paner-noborder">
    <div class="d-paner-body">
      <div class="d-row">
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">标签名:</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.tagName" class="d-form-input" type="text" placeholder="如：script、style、link" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">属性:</label>
          </div>
          <div class="d-form-el">
            <Grid v-model="state.properts" :isPagerAble="false">
              <GridColumn :width="60" type="index" label="序号" className="d-vm d-vm-actions" />
              <GridColumn field="name" label="名称">
                <template v-slot:body="scope">
                  <input v-model="scope.name" type="text" class="d-form-input" />
                </template>
              </GridColumn>
              <GridColumn field="name" label="值">
                <template v-slot:body="scope">
                  <input v-model="scope.value" type="text" class="d-form-input" />
                </template>
              </GridColumn>
              <GridColumn field="name" label="操作" :width="60" className="d-vm d-vm-actions">
                <template v-slot:body="scope">
                <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
                  <a @click="handleAddItem(scope)" class="d-tools-item d-text-theme"><PlusIcon size="sm" /></a>
                  <a @click="handleDelItem(scope)" class="d-tools-item d-text-theme"><DeleteIcon size="sm" /></a>
                </div>
                </template>
              </GridColumn>
            </Grid>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">内容:</label>
          </div>
          <div class="d-form-el">
            <textarea v-model="state.text" class="d-form-textarea"></textarea>
          </div>
        </div>
        <div class="d-form-el d-text-right">
          <button @click="handleInsert" class="d-btn d-btn-primary d-actions-item" type="button">插入</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Grid, GridColumn, Dialoger } from '@daelui/vdog/dist/components.js'
import { PlusIcon, DeleteIcon } from '@daelui/vdog/dist/icons.js'
import { domer } from '@daelui/dogjs/dist/components.js'

export default {
  components: {
    Grid,
    GridColumn,
    PlusIcon,
    DeleteIcon,
  },

  props: {

  },

  data () {
    return {
      state: {
        tagName: '',
        text: '',
        properts: []
      }
    }
  },

  watch: {
    'state.tagName': function () {
      this.syncProperts()
    }
  },

  methods: {
    // 同步属性
    syncProperts () {
      let tagName = this.state.tagName
      if (/script/i.test(tagName)) {
        this.state.properts = [
          {id: Math.random(), name: 'type', value: 'text/javascript'},
          {id: Math.random(), name: 'defer', value: ''},
          {id: Math.random(), name: 'async', value: ''}
        ]
      } else if (/style/i.test(tagName)) {
        this.state.properts = [
          {id: Math.random(), name: 'type', value: 'text/css'}
        ]
      } else if (/link/i.test(tagName)) {
        this.state.properts = [
          {id: Math.random(), name: 'rel', value: 'stylesheet'}
        ]
      }
    },
    /**
     * @function 格式化
    */
    handleInsert () {
      let tagName = this.state.tagName
      if (!tagName) {
        Dialoger.warn('元素不存在')
        return true
      }
      let properts = this.state.properts
      let props = {}
      properts.forEach(item => {
        if (item.name) {
          props[item.name] = item.value || ''
        }
      })
      domer.appendElement(tagName, props, null, this.state.text)
    },

    handleAddItem () {
      this.state.properts.push(
        {id: Math.random(), name: '', value: ''}
      )
    },
    handleDelItem (node) {
      this.state.properts = this.state.properts.filter(item => {
        return item !== node
      })
    }
  },

  beforeMount () {

  },

  mounted () {
    this.state.properts.push(
      {id: Math.random(), name: '', value: ''}
    )
  }
}
</script>

<style lang="less" scoped>

</style>
